<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="通知公告">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="公告名称">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.name"
                  placeholder="输入公告名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="通知群体">
                <a-select
                  ref="select"
                  v-model:value="formState.noticeGroup"
                  style="width: 100%"
                  placeholder="通知群体"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">普通用户</a-select-option>
                  <a-select-option :value="2">个体商家</a-select-option>
                  <a-select-option :value="3">企业商家</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="通知方式">
                <a-select
                  ref="select"
                  v-model:value="formState.noticeMethod"
                  style="width: 100%"
                  placeholder="通知方式"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">应用通知</a-select-option>
                  <a-select-option :value="2">短信通知</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="通知类型">
                <a-select
                  ref="select"
                  v-model:value="formState.noticeType"
                  style="width: 100%"
                  placeholder="通知类型"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">即时通知</a-select-option>
                  <a-select-option :value="2">定时通知</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="发布时间">
                <a-range-picker
                  v-model:value="datePicker"
                  @change="handleCHangeDate"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handleOpen('新建通知', {})"
              >新建</a-button
            >
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="notifyColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'noticeGroup'">
              {{
                record.noticeGroup == 1
                  ? "普通用户"
                  : record.noticeGroup == 2
                  ? "个体商家"
                  : "企业商家"
              }}
            </template>
            <template v-if="column.key === 'noticeMethod'">
              {{ record.noticeMethod == 1 ? "应用通知" : "短信通知" }}
            </template>
            <template v-if="column.key === 'noticeType'">
              {{ record.noticeType == 1 ? "即时通知" : "定时通知" }}
            </template>
            <template v-if="column.key === 'sendState'">
              {{ record.sendState == 1 ? "未发送" : "已发送" }}
            </template>
            <template v-if="record.sendState == 1 && column.key === 'action'">
              <a-space>
                <a-button @click="handleOpen('编辑通知', record)"
                  >编辑</a-button
                >
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
  <addModal ref="addModalRef" @refreshList="refreshList" />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { notifyColumns } from "./columns.js";
import { getNoticePage } from "@/api/notice";
import addModal from "./addModal.vue";
const total = ref(0);
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: () => `共 ${pagination.value.total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  name: undefined,
  noticeGroup: undefined,
  noticeMethod: undefined,
  noticeMethod: undefined,
  startTime: undefined,
  endTime: undefined,
});
// 修改时间
const datePicker = ref(null);
const handleCHangeDate = (date, dateString) => {
  formState.value.startTime = dateString[0] + ' 00:00:00';
  formState.value.endTime = dateString[1] + ' 23:59:59';
  datePicker.value = date;
};
const dataSource = ref([]);
// 获取分页数据
const getNoticePageList = () => {
  getNoticePage(formState.value).then((res) => {
    dataSource.value = res.data.list;
    pagination.value.total = res.data.total;
  });
};
// 新建通知
const addModalRef= ref(null)
const handleOpen = (titles, record) => {
  addModalRef.value.open(titles, record);
};
function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  getNoticePageList();
}
function handleReset() {
  formState.value = {
    page: 1,
    pageSize: 10,
    name: undefined,
    noticeGroup: undefined,
    noticeMethod: undefined,
    noticeMethod: undefined,
    startTime: undefined,
    endTime: undefined,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getNoticePageList();
}

function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getNoticePageList();
}
function refreshList() {
  getNoticePageList()
}
onMounted(() => {
  getNoticePageList();
});
</script>

<style lang="less">
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
</style>
